import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/model/match/user_match_info_model.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/widget/extended_image_slide_widget.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:flutter_changdian_football/widget/toast/custom_toast.dart';
import 'package:get/get.dart';

class ListItemWidget extends StatelessWidget {
  const ListItemWidget({
    super.key,
    this.userMatchInfoModel,
    this.signUpTap,
    this.goPayBillsTap,
    this.cancelSignUpTap
  });

  final UserMatchInfoModel? userMatchInfoModel;
  // 去报名
  final Function? signUpTap;
  // 去缴费
  final Function? goPayBillsTap;
  // 取消报名
  final Function? cancelSignUpTap;

  @override
  Widget build(BuildContext context) {

    Color bgColor = const Color(0xff499360);
    String floatText = '快速报名';

    if (userMatchInfoModel?.isSignUp == true) {
      if (userMatchInfoModel?.isPay == true) {
        bgColor = const Color(0xffF4333C);
        if (userMatchInfoModel?.normalCancellation == true) {
          floatText = '取消报名';
        } else {
          floatText = '报水';
        }
      } else if (userMatchInfoModel?.isPay == false) {
        bgColor = const Color(0xffFF9100);
        floatText = '去缴费';
      } else {
        // 禁用报名
        bgColor = const Color(0xffCCCCCC);
      }
    }

    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: 16.w, horizontal: 16.w),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.r)
          ),
          child: Column(
            children: [
              SizedBox(
                child: Row(
                  children: [
                    GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                        if (userMatchInfoModel?.clubImage != null) {
                          Get.to(
                            ExtendedImageSlideWidget(
                              url: "${userMatchInfoModel?.clubImage ?? ''}",
                            ),
                            opaque: false
                          );
                        }
                      },
                      child: Container(
                        width: 80.w,
                        height: 80.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.r)
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.r),
                          child: Image.network(userMatchInfoModel?.clubImage ?? '', fit: BoxFit.fill,),
                        )
                      ),
                    ),

                    SizedBox(width: 12.w,),

                    SizedBox(
                      child: Text(userMatchInfoModel?.clubName ?? '', style: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w500, color: const Color(0xff000000)),),
                    )
                  ],
                ),
              ),

              SizedBox(height: 12.w,),

              Container(
                decoration: BoxDecoration(
                  color: const Color(0xffF9F9F9),
                  borderRadius: BorderRadius.circular(8.r)
                ),
                padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 12.w),
                child: Column(
                  children: [
                    _typeColumnIconTextWidget(text: userMatchInfoModel?.courtName ?? '', icon: 'assets/images/game_local.png'),

                    SizedBox(height: 4.w,),

                    SizedBox(
                      child: Row(
                        children: [
                          _typeRowIconTextWidget(text: userMatchInfoModel?.matchTime ?? '', icon: 'assets/images/game_time.png'),

                          SizedBox(width: 10.w,),

                          _typeRowIconTextWidget(text: userMatchInfoModel?.isPunishment == 'true' ? '报水罚款' : '无报水惩罚', icon: 'assets/images/game_warning.png'),
                        ],
                      ),
                    ),

                    SizedBox(height: 4.w,),

                    SizedBox(
                      child: Row(
                        children: [
                          _typeRowIconTextWidget(text: userMatchInfoModel?.matchRulesName ?? '', icon: 'assets/images/game_rule.png'),

                          SizedBox(width: 30.w,),

                          _typeRowIconTextWidget(text: userMatchInfoModel?.jerseyColor ?? '未知', icon: 'assets/images/qyys.png'),

                          SizedBox(width: 30.w,),

                          _typeRowIconTextWidget(text: userMatchInfoModel?.opponent ?? '未知', icon: 'assets/images/vs.png'),
                        ],
                      ),
                    )
                  ],
                ),
              ),


              SizedBox(height: 12.w,),

              SizedBox(
                child: Row(
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 8.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(
                            child: RichText(
                              text: TextSpan(
                                children: [
                                  TextSpan(
                                    text: '¥',
                                    style: TextStyle(fontSize: 12.sp, color: const Color(0xff499360), fontWeight: FontWeight.w700)
                                  ),
                                  TextSpan(
                                    text: '${userMatchInfoModel?.siteFees}',
                                    style: TextStyle(fontSize: 16.sp, color: const Color(0xff499360), fontWeight: FontWeight.w700)
                                  )
                                ]
                              )
                            ),
                          ),

                          SizedBox(height: 2.w,),

                          SizedBox(
                            child: Text('场地费', style: TextStyle(fontSize: 12.sp, color: const Color(0xff999999), fontWeight: FontWeight.w500),),
                          ),                                  
                        ],
                      ),
                    ),


                    const Spacer(),

                    GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                        Get.toNamed(AppRoutes.enrollmentDetails, parameters: {
                          'clubId': '${userMatchInfoModel?.clubId}',
                          'matchId': '${userMatchInfoModel?.matchId}'
                        });
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: const Color(0xffF1F1F1),
                          borderRadius: BorderRadius.circular(24.r)
                        ),
                        padding: EdgeInsets.symmetric(vertical: 9.w, horizontal: 22.w),
                        child: Text('详情', style: TextStyle(fontSize: 14.sp, color: const Color(0xff499360), fontWeight: FontWeight.w500),),
                      ),
                    ),

                    SizedBox(width: 8.w,),

                    GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                        // AppRoutes.rechargePayment
                        if (userMatchInfoModel?.isSignUp == true) {
                          if (userMatchInfoModel?.isPay == true) {
                            if (userMatchInfoModel?.normalCancellation == true) {
                              /// 取消报名
                              cancelSignUpTap?.call(userMatchInfoModel?.matchId);
                            } else {
                              cancelSignUpTap?.call(userMatchInfoModel?.matchId);
                            }
                          } else if (userMatchInfoModel?.isPay == false) {
                            /// 去缴费
                            goPayBillsTap?.call(userMatchInfoModel?.matchId);
                          }
                        } else {
                          /// 快速报名
                          signUpTap?.call(userMatchInfoModel?.matchId);
                        }
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: bgColor,
                          borderRadius: BorderRadius.circular(24.r)
                        ),
                        padding: EdgeInsets.symmetric(vertical: 9.w, horizontal: 22.w),
                        child: Text(floatText, style: TextStyle(fontSize: 14.sp, color: Colors.white, fontWeight: FontWeight.w500),),
                      ),
                    ),

                  ],
                ),
              )
            ],
          ),
        ),

        Positioned(
          right: -9.w,
          top: 16.w,
          child: Container(
            width: 103.w,
            height: 40.w,
            padding: EdgeInsets.only(top: 3.w),
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.fill, 
                image: AssetImage(userMatchInfoModel?.isFull == true ? 'assets/images/game_gray.png' : 'assets/images/game_flag.png')
              ),
            ),
            child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(text: "已报名",style: TextStyle(color: Colors.white, fontSize: 12.sp),
                children: [
                  TextSpan(text: " ${userMatchInfoModel?.signUpUserNum ?? 0}",style: TextStyle(color: userMatchInfoModel?.isFull == true ? Colors.red : Colors.white, fontWeight: FontWeight.w600, fontSize: 16.sp),),
                  TextSpan(text: "/${userMatchInfoModel?.matchNumberParticipants ?? 0}",style: TextStyle(color: Colors.white, fontSize: 12.sp),),
                ]
              )
            )
          )
        ),
      ],
    );
  }


  _typeColumnIconTextWidget({
    String text = '',
    String icon = ''
  }) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 6.w),
      child: Row(
        children: [
          SizedBox(
            width: 16.w,
            height: 16.w,
            child: Image.asset(icon),
          ),
          SizedBox(width: 8.w,),
          SizedBox(
            child: Text(text, style: TextStyle(fontSize: 12.sp, color: const Color(0xff666666)),),
          )
        ],
      ),
    );
  }


  _typeRowIconTextWidget({
    String text = '',
    String icon = ''
  }) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 4.w),
      child: Row(
        children: [
          SizedBox(
            width: 16.w,
            height: 16.w,
            child: Image.asset(icon),
          ),
          SizedBox(width: 8.w,),
          SizedBox(
            child: Text(text, style: TextStyle(fontSize: 12.sp, color: const Color(0xff666666)),),
          )
        ],
      ),
    );
  }


}